<template>
	<div class="heightMax publicbox">
		<div class="header">
			<div class="listName">
				<i></i><span class="font14">组织架构信息</span>
			</div>
			<div>
				<el-button type="primary" size="mini" @click="enture('form')" v-loading='submitLoading'>保存</el-button>
				<el-button size="mini" @click='backRouter'>返回</el-button>
			</div>
		</div>
		<div class="content">
			<el-form ref="form" :model="form" :rules="rules" label-width="90px">
				<el-row :gutter="20">
					<el-col :span="7" :offset='1'>
						<el-form-item label="机构名称:" prop="organizationName">
							<el-input type="text" v-model="form.organizationName" placeholder="请输入机构名称" size="mini" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- <el-row :gutter="20">
					<el-col :span="7" :offset='1'>
						<el-form-item label="部门类型:" prop="departmentType">
							<el-select v-model="form.departmentType" placeholder="请选择部门类型" size="mini" clearable>
								<el-option v-for="(item,index) in departmentTypeArr" :label="item.label" :value="item.value" :key='index'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row> -->
				<el-row :gutter="20">
					<el-col :span="7" :offset='1'>
						<el-form-item label="所属机构:">
							<el-cascader :show-all-levels="false" filterable v-model='form.branchValue' :options="newOptions" :props="{emitPath:false, checkStrictly: true ,value:'id',label:'name',children:'list'}"
							 size="mini" clearable placeholder="请选择所属机构"></el-cascader>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="7" :offset='1'>
						<el-form-item label="排序号:" prop="sortNum">
							<el-input-number v-model="form.sortNum" :min="0" :step="1" label="请输入排序号" size="mini"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		AllLoading,
		axiosChange
	} from "@/common.js";
	import {
		organizationName,
		departmentType,
		sortNum
	} from '../AddRoleManagment/rule.js'
	import {
		branchValue,
	} from '../AddRoleCount/rules.js'
	export default {
		props: {
			nowType: {
				type: Number,
				default () {
					return 0 //0是新增  1是编辑
				}
			}
		},
		mounted() {
			this.getTableList()
			if (this.nowType == 1) {
				this.getComplieList()
			}
		},
		data() {
			return {
				submitLoading: false,
				newOptions: [],
				form: {
					organizationName: '',
					departmentType: '',
					branchValue: '',
					sortNum: '',
				},
				departmentTypeArr: [{
					label: '监管部门',
					value: 10,
				}, {
					label: '物业部门',
					value: 20
				}, {
					label: '使用单位部门',
					value: 30
				}],
				rules: {
					organizationName,
					departmentType,
					branchValue,
					sortNum,
				},
			}
		},
		computed: {
			roleOperation() {
				if (localStorage.roleOperation) {
					return JSON.parse(localStorage.roleOperation).id
				} else {
					return ''
				}
			},
			organizationId() {
				if (localStorage.frameworkId) {
					return JSON.parse(localStorage.frameworkId).id
				} else {
					return ''
				}
			}
		},
		methods: {
			//获取列表数据
			getTableList() {
				let params = {
					company: this.organizationId,
					flag: ''
				}
				axiosGet('/user/organization/organize/', params, (res) => {
					if (res.code == 0) {
						if (Object.keys(res.detail).length != 0) {
							this.newOptions.push(res.detail)
						}
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//获取编辑数据
			getComplieList() {
				let url = '/user/organization/organize/' + this.roleOperation + '/'
				axiosGet(url, {}, (res) => {
					if (res.code == 0) {
						this.form.organizationName = res.detail.name
						this.form.sortNum = res.detail.serial_num
						this.form.branchValue = res.detail.id
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//返回父级路由
			backRouter() {
				let obj = {
					name: '部门管理',
					router: '/MainView/SystemManagement/DivisionalManagement'
				}
				this.$store.commit('GOTAGROUTER', obj)
			},
			//保存
			enture(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.submitLoading = true
						let url = ''
						let method = ''
						let data = {
							name: this.form.organizationName,
							serial_num: this.form.sortNum, //序号
							company: this.organizationId, // 组织结构的id
							parent: this.form.branchValue
						}
						if (!this.nowType) {
							url = '/user/organization/organize/'
							method = 'post'
						} else {
							url = '/user/organization/organize/' + this.roleOperation + '/'
							method = 'put'
						}
						axiosChange(url, method, data, (res) => {
							this.submitLoading = false
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: '操作成功'
								})
								this.backRouter()
							} else {
								this.$message.error(res.detail.result)
							}
						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style scoped lang='less'>
	.header {
		display: flex;
		justify-content: space-between;
	}

	.content {
		height: 90%;
		width: 100%;
		margin-top: 5px;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
			margin-left: 0;
		}

	}
</style>
